<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>02-recordList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
  <style>
    label[class="error"]{
      color:#f00;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>寻找失主</h3>
    <hr>
    <div class="">
      <table id="dg" style="width:100%;height:460px;"></table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
      <table>
        <tr>
          <!-- 隐藏此功能，添加爱心社部门这个特殊用户，凡是要发布寻找信息，都用爱心社这个用户登陆来发布，2019/03/03 -->
          <!-- 用户发布的寻找记录，照片的命名是"uid_imageName"。如果管理员也能发布寻找信息，也需要传递rid过去，照片的命名为"rid_imageName"。因为隐藏此功能了，故没有修改 -->
          <!-- <td><a href="javascript:void(0)" class="easyui-linkbutton newRecordCls" data-options="iconCls:'icon-add',plain:true" onclick="newRecord()">添加</a></td> -->
          <td><a href="javascript:void(0)" class="easyui-linkbutton detailRecordCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailRecord()">详情</a></td>
          <td><a href="javascript:void(0)" class="easyui-linkbutton removeRecordCls" data-options="iconCls:'icon-remove',plain:true" onclick="destroyRecord()">移除</a></td>
          <td>
            <div class="categoryToPageDiv">
              <form class="form-inline">
                <label class="my-1 mr-2" for="forCategoryToPage">物品类别</label>
                <select class="custom-select my-1 mr-lg-5" id="forCategoryToPage">
                </select>
              </form>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div> <!-- container-fluid -->


  <!-- Modal : addSearchLoser -->
  <div class="modal fade" id="addSearchLoser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <!-- enctype="multipart/form-data" 多功能表单  ==> 可以上传文件 -->
            <form method="post" enctype="multipart/form-data" id="addSearchLoserForm">
              <div class="form-group row">
                <label class="col-sm-1"></label>
                <label for="forAddTitle" class="col-sm-2 col-form-label text-center">标题</label>
                <div class="col-sm-7">
                  <input type="text" id="forAddTitle" name="forAddTitle" class="form-control" maxLength="15">
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-1"></label>
                <label for="forCategoryList" class="col-sm-2 col-form-label text-center">失物类别</label>
                <div class="col-sm-7">
                  <select class="custom-select forAddCategory" id="forCategoryList" name="forAddCategory">
                    <!-- 必须有一个value为空的option， -->
                    <option value=''>请选择分类...</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-1"></label>
                <label for="forAddDetail" class="col-sm-2 col-form-label text-center">细节</label>
                <div class="col-sm-7">
                  <textarea id="forAddDetail" class="form-control" name="forAddDetail" rows="4"></textarea>
                </div>
              </div>
	            <div class="form-group row">
	              <label class="col-sm-1"></label>
	              <label for="forAddPhone" class="col-sm-2 col-form-label text-center">联系电话</label>
	              <div class="col-sm-7">
	                <input type="text" id="forAddPhone" class="form-control" name="forAddPhone" value="0758-272727">
	              </div>
	            </div>
              <!-- 选择图片。    accept="image/gif,image/jpeg,image/jpg,image/png" -->
              <div class="form-group row">
                <label class="col-sm-1"></label>
                <label for="" class="col-sm-2 col-form-label text-center">照片</label>
                <div class="custom-file col-sm-7">
                  <input type="file" accept="image/*" class="custom-file-input" id="forUploadPhoto" name="forUploadPhoto">
                  <label class="custom-file-label showPhotoName">选择照片</label>
                </div>
              </div>
              <!-- 显示图片 -->
              <div class="form-group row showPhotoDiv" style="display: none;">
                <label class="col-sm-3"></label>
                <div class="col-sm-7" style="border: 1px solid #C1C1C1;">
                  <figure class="figure">
                    <span class="badge badge-secondary btn closeImgBtn" style="position:absolute;right:16px;">X</span>
                    <img class="figure-img img-fluid rounded showPhotoImg">
                  </figure>
                </div>
              </div>
            </form>
            <br>
            <div class="form-group row">
              <label class="col-sm-3"></label>
              <div class="col-sm-6 text-center">
                <button type="button" class="btn col-sm-3 btn-outline-primary  mr-lg-5" data-dismiss="modal">取消</button>
                <button type="button" class="btn col-sm-3 btn-outline-primary confirmSaveSearchLoser">添加</button>
              </div>
            </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <!-- Modal : showSearchLoser -->
  <div class="modal fade" id="showSearchLoser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" id="showSearchLoserForm">
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forPhoto" class="col-sm-2 col-form-label text-center">照片</label>
              <div class="col-sm-7">
                <figure class="figure">
                  <img src="" class="figure-img img-fluid rounded mx-auto d-block" style="width:400px;height:200px;">
                </figure>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowApplicant" class="col-sm-2 col-form-label text-center">发布者 </label>
              <div class="col-sm-7">
                <input type="text" id="forShowApplicant" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowTitle" class="col-sm-2 col-form-label text-center">标题 </label>
              <div class="col-sm-7">
                <input type="text" id="forShowTitle" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowCategory" class="col-sm-2 col-form-label text-center">失物类别</label>
              <div class="col-sm-7">
                <input type="text" id="forShowCategory" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowIssueTime" class="col-sm-2 col-form-label text-center">发布时间</label>
              <div class="col-sm-7">
                <input type="text" id="forShowIssueTime" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowPhone" class="col-sm-2 col-form-label text-center">联系电话</label>
              <div class="col-sm-7">
                <input type="text" id="forShowPhone" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowDetail" class="col-sm-2 col-form-label text-center">细节</label>
              <div class="col-sm-7">
                <textarea id="forShowDetail" class="form-control" rows="4" readonly></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/categoryAjax.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <!-- 上传图片，移除图片 -->
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/fileUpload.js"></script>
  <script type="text/javascript">
    $(function(){
       $("#dg").datagrid({
         url:"/LostAndFound/searchForLoser?method=recordListForSearchLoser",
         queryParams:{
        	 cid : $("#forCategoryToPage option:selected").val()
         },
         columns:[[
             {field:'title',title:'标题',width:100},
             {field:'username',title:'发布者',width:100},
             {field:'cname',title:'物品类型',width:100},
             {field:'phone',title:'联系电话',width:100},
             {field:'issuetime',title:'发布时间',width:100},
           ]],
         rownumbers:true,
         pagination:true,
         singleSelect:true,
         method:"post",
         fitColumns:true,
         toolbar:"#toolbar",
         striped:true
      });
      jQuery.validator.setDefaults({
    	  success:"valid"
      });
      $("#addSearchLoserForm").validate({
    	  rules:{
          forAddTitle:{
            required:true,
            maxlength:15
          },
          forAddCategory:{
            required:true
          }, 
          forAddDetail:{
            required:true
          },
          forAddPhone:{
            required:true        	  
          }
    	  }
      });
      $(".confirmSaveSearchLoser").on("click",function(){
    	  if($("#addSearchLoserForm").valid()){
    		  saveNewRecord();
    	  }
      })
      // 分类变化，table变化
      $("#forCategoryToPage").on("change",function(){
    	  $("#dg").datagrid("load",{
    		  cid:$("#forCategoryToPage option:selected").val()
    	  })
      });
    });// end of $(function(){})
    // 确定添加 寻找失主
    function saveNewRecord(){
    	var formData = new FormData();
    	formData.append("title",$("#forAddTitle").val());
      formData.append("cid",$("#forCategoryList").val());
      formData.append("detailInfo",$("#forAddDetail").val());
      formData.append("phone",$("#forAddPhone").val());
      if($("#forUploadPhoto")[0].files[0]!=null){
          formData.append("file",$("#forUploadPhoto")[0].files[0]);
      }
    	$(".confirmSaveSearchLoser").attr( 'data-dismiss','modal');
    	$.ajax({
    		url:"/LostAndFound/searchForLoser?method=handleAddNewSearchLoser",
    		type:"post",
    		data:formData,
    		processData:false,
    		contentType:false,
    		dataType:"json",
    		success:function(result){
    			if(result.success){
    				$("#dg").datagrid("reload");
    			}else{
    				$.messager.show({
    					title:"Error",
    					msg:"添加错误！"
    				})
    			}
    		}
    	});
    }
    // 弹出详情层
    function detailRecord(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
	    	$(".detailRecordCls").attr( 'data-toggle','modal');
	      $(".detailRecordCls").attr('data-target','#showSearchLoser');
	      $(".figure-img").attr("src","/LostAndFound/images"+row.image);
	      $("#forShowApplicant").val(row.username);
	      $("#forShowTitle").val(row.title);
	      $("#forShowCategory").val(row.cname);
	      $("#forShowIssueTime").val(row.issuetime);
	      $("#forShowPhone").val(row.phone);
	      $("#forShowDetail").val(row.detailinfo);
    	}
    }
    // 每次点击添加，把添加表单清空
    function closeShowImgFn(){
      $("#forAddTitle").val("");
      $("#forAddDetail").val("");
      $("#forAddPhone").val("0758-272727"); // 爱心社发布，默认办公电话
      $("label.error").remove();
      closeShowImg();
    }
    // 弹出添加层
    function newRecord(){
      $(".newRecordCls").attr( 'data-toggle','modal');
      $(".newRecordCls").attr('data-target','#addSearchLoser');
      $(".confirmSaveSearchLoser").removeAttr('data-dismiss','modal');
      closeShowImgFn();
    }
    // 移除记录
    function destroyRecord(){
      var row = $('#dg').datagrid('getSelected');
      if(row){
        $.messager.confirm('Confirm','确定删除？',function(r){
          if(r){
            $.post(
                "/LostAndFound/searchForLoser?method=handleDeleteSearchLoserRecordForEasyUI",
                {"aid":row.aid},
                function(data){
                  if(data.success){
                    $('#dg').datagrid('reload'); // reload the info data in current page
                  }else{
                    $.messager.show({
                      title:"Error",
                      msg:"删除错误！"
                    })
                  }
                },
                "json"
            );
          }
        })
      }
    }
  </script>
</body>
</html>